<template>
	<view class="content">
		<view class="usr-info">
      <u-image @tap="checkLogin()" shape="circle" width="100rpx" height="100rpx" error-icon="account-fill" :src="usrInfo.avatarUrl"></u-image>
      <view class="nick-name" @tap="checkLogin()">{{usrInfo.nickName}}</view>
    </view>
    <view class="content-padding">
      <view class="fn-title">功能列表</view>
      <view>
        <u-row gutter="30rpx">
          <u-col span="6" >
            <view class="fn-account-book" @tap="checkLogin()">
              <u-icon name="rmb-circle" size="80" color="#fff"></u-icon>
              <view class="right-info">
                <view class="r-title">记账</view>
                <view>资产轻松掌握</view>
              </view>
            </view>
          </u-col>
          <u-col span="6"></u-col>
        </u-row>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usrInfo: {
          nickName: '去登录',
          avatarUrl: ''
        },
        loginFlag: false
			}
		},
		onShow() {
      let usrInfo = uni.getStorageSync(this.VUEX_USR_INFO_KEY)
      if (usrInfo) {
        this.loginFlag = true;
        this.usrInfo = usrInfo;
      }
		},
		methods: {
      checkLogin(turnToPath) {
        if (!this.loginFlag) {
          uni.navigateTo({
            url: '../common/auth/auth/auth?turnBackPath=' + turnToPath
          })
          return;
        }
      }
		}
	}
</script>

<style>
	.usr-info {
    display: flex;
    flex-direction: column;
    height: 210rpx;
    justify-content: center;
    align-items: center;
    background-color: #4CA6FF;
  }
  .usr-info .nick-name {
    color: #fff;
    font-size: 32rpx;
    margin-top: 20rpx;
  }
  .fn-account-book {
    background-color: #FFB26D;
    border-radius: 10rpx;
    padding: 30rpx !important;
    display: flex;
  }
  
  .fn-account-book .right-info {
    margin-left: 20rpx;
    color: #fff;
    font-size: 24rpx;
  }
  
  .fn-account-book .right-info .r-title {
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
</style>
